<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
  <h1 class="h2">Customers</h1>
  <div class="btn-toolbar mb-2 mb-md-0">
    <div class="btn-group mr-2">
      <button class="btn btn-sm btn-outline-secondary">Share</button>
      <button class="btn btn-sm btn-outline-secondary">Export</button>
    </div>
  </div>
</div>

<h2>All Customers</h2>

<div class="table-responsive">
  <table class="table table-striped table-sm">
    <thead>
      <tr>
        <th>#</th>
        <th>Name</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let customer of vm.customers"(click)="customerDetail(customer.id)" style="cursor: pointer;">
        <td>{{ customer.id }}</td>
        <td>{{ customer.name }}</td>
      </tr>
    </tbody>
  </table>
</div>
